<template>
  <div class="checkin-section">
    <div class="table-container">
      <el-table
        :data="paginatedCheckinList"
        style="width: 100%"
        :max-height="500"
        v-loading="loading"
      >
        <el-table-column prop="id" label="ID" min-width="80" align="center" />
        <el-table-column prop="nickname" label="用户ID" min-width="100" />
        <el-table-column prop="checkinDate" label="签到日期" min-width="120" />
        <el-table-column
          prop="consecutiveDays"
          label="连续天数"
          min-width="100"
        >
          <template #default="{ row }">
            <el-tag type="primary">{{ row.consecutiveDays }} 天</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pointsEarned" label="获得积分" min-width="100">
          <template #default="{ row }">
            <el-tag type="success">+{{ row.pointsEarned }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdTime"
          label="创建时间"
          min-width="180"
          :formatter="formatDateTime"
        />
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="prev, pager, next, jumper, ->, total"
        :pager-count="7"
        :page-sizes="[10, 20, 50, 100]"
        :disabled="loading"
        prev-text="上一页"
        next-text="下一页"
        jumper-text="跳转到"
        total-text="共"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import checkinRecordsApi from "../api/checkinRecordsApi";
import { ElMessage } from "element-plus";

// 响应式数据
const checkinList = ref([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 计算分页后的数据
const paginatedCheckinList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return checkinList.value.slice(start, end);
});

// 获取签到记录数据
const fetchCheckinRecords = async () => {
  loading.value = true;
  try {
    const response = await checkinRecordsApi.getcheckinRecordslist();
    checkinList.value = response.data;
    total.value = response.data.length;
  } catch (error) {
    ElMessage.error("获取签到记录失败: " + error.message);
    console.error("获取签到记录失败:", error);
  } finally {
    loading.value = false;
  }
};

// 分页事件处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置到第一页
  fetchCheckinRecords();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchCheckinRecords();
};

// 格式化时间
const formatDateTime = (row, column, cellValue) => {
  if (!cellValue) return "-";

  try {
    // 如果已经是Date对象或时间戳
    const date = new Date(cellValue);
    if (isNaN(date.getTime())) {
      // 尝试处理字符串格式
      if (typeof cellValue === "string") {
        // 处理可能的不同时间格式
        const parsedDate = new Date(cellValue.replace(/-/g, "/"));
        if (!isNaN(parsedDate.getTime())) {
          return formatDate(parsedDate);
        }
      }
      return cellValue; // 无法解析则返回原值
    }
    return formatDate(date);
  } catch (e) {
    console.error("格式化时间出错:", e);
    return cellValue;
  }
};

// 辅助格式化函数
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 组件挂载时获取数据
onMounted(() => {
  fetchCheckinRecords();
});
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  background: #fff;
  border-radius: 8px;
  margin-top: 16px;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}
</style>